<template>
	<div class="sidebar" :class="{ 'is-collapsed': isCollapsed }">
		<div class="sidebar-header">
			<div class="logo-container">
				<img src="@/assets/logo.svg" alt="Logo" class="logo" />
				<span v-show="!isCollapsed" class="logo-text">NexAdmin</span>
			</div>
		</div>

		<el-scrollbar>
			<el-menu
				:default-active="activeMenu"
				:collapse="isCollapsed"
				:unique-opened="true"
				:collapse-transition="false"
				class="sidebar-menu"
				router>
				<template v-for="item in menuItems" :key="item.path">
					<!-- 没有子菜单的菜单项 -->
					<el-menu-item v-if="!item.children" :index="item.path">
						<el-icon><component :is="item.icon" /></el-icon>
						<template #title>
							<span>{{ item.title }}</span>
						</template>
					</el-menu-item>

					<!-- 有子菜单的菜单项 -->
					<el-sub-menu v-else :index="item.path">
						<template #title>
							<el-icon><component :is="item.icon" /></el-icon>
							<span>{{ item.title }}</span>
						</template>

						<el-menu-item
							v-for="child in item.children"
							:key="child.path"
							:index="child.path">
							<el-icon><component :is="child.icon" /></el-icon>
							<template #title>
								<span>{{ child.title }}</span>
							</template>
						</el-menu-item>
					</el-sub-menu>
				</template>
			</el-menu>
		</el-scrollbar>

		<div class="sidebar-footer" @click="toggleCollapse">
			<el-icon class="collapse-icon"> <Fold v-if="!isCollapsed" /><Expand v-else /> </el-icon>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Menu as MenuIcon, Fold, Expand } from "@element-plus/icons-vue";

const props = defineProps({
	isCollapsed: {
		type: Boolean,
		default: false,
	},
});

const route = useRoute();
const router = useRouter();

// 当前激活的菜单项
const activeMenu = computed(() => route.path);

// 菜单数据
const menuItems = [
	{
		title: "首页",
		path: "/dashboard",
		icon: "House",
	},
	{
		title: "用户管理",
		path: "/user",
		icon: "User",
		children: [
			{
				title: "用户列表",
				path: "/user/list",
				icon: "List",
			},
		],
	},
	{
		title: "数据分析",
		path: "/analytics",
		icon: "TrendCharts",
		children: [
			{
				title: "流量分析",
				path: "/analytics/traffic",
				icon: "TrendCharts",
			},
			{
				title: "用户分析",
				path: "/analytics/users",
				icon: "User",
			},
		],
	},
	{
		title: "商品管理",
		path: "/products",
		icon: "ShoppingCart",
		children: [
			{
				title: "商品列表",
				path: "/products/list",
				icon: "List",
			},
			{
				title: "商品分类",
				path: "/products/categories",
				icon: "MenuIcon",
			},
		],
	},
	{
		title: "订单管理",
		path: "/orders",
		icon: "Document",
	},
	{
		title: "客服管理",
		path: "/customer-service",
		icon: "ChatDotRound",
	},
	{
		title: "系统设置",
		path: "/settings",
		icon: "Setting",
	},
];

// 切换折叠状态
const emit = defineEmits(["collapse"]);
const toggleCollapse = () => {
	emit("collapse", !props.isCollapsed);
};
</script>

<style scoped lang="scss">
.sidebar {
	width: 260px;
	height: 100vh;
	background: #fff;
	transition: all 0.3s;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

	&.is-collapsed {
		width: 64px;

		.logo-container {
			padding: 16px 14px;

			.logo {
				margin: 0;
			}
		}
	}

	.sidebar-header {
		height: 64px;
		display: flex;
		align-items: center;
		padding: 0 16px;
		border-bottom: 1px solid var(--el-border-color-light);
		background: #fff;

		.logo-container {
			display: flex;
			align-items: center;
			padding: 16px 0;
			transition: all 0.3s;

			.logo {
				width: 32px;
				height: 32px;
				margin-right: 12px;
				transition: all 0.3s;
			}

			.logo-text {
				color: var(--el-text-color-primary);
				font-size: 18px;
				font-weight: 600;
				white-space: nowrap;
				opacity: 1;
				transition: all 0.3s;
			}
		}
	}

	.sidebar-menu {
		flex: 1;
		border: none;
		background: transparent;

		:deep(.el-menu) {
			background: transparent;
			border: none;
		}

		:deep(.el-menu-item) {
			height: 50px;
			line-height: 50px;
			color: var(--el-text-color-regular);

			&:hover {
				color: var(--el-color-primary);
				background: var(--el-color-primary-light-9);
			}

			&.is-active {
				color: var(--el-color-primary);
				background: var(--el-color-primary-light-9);
				font-weight: 600;

				&:hover {
					background: var(--el-color-primary-light-9);
				}

				.el-icon {
					color: var(--el-color-primary);
				}
			}

			.el-icon {
				color: var(--el-text-color-regular);
			}
		}

		:deep(.el-sub-menu) {
			.el-sub-menu__title {
				height: 50px;
				line-height: 50px;
				color: var(--el-text-color-regular);

				&:hover {
					color: var(--el-color-primary);
					background: var(--el-color-primary-light-9);
				}

				.el-icon {
					color: var(--el-text-color-regular);
				}
			}

			&.is-active {
				> .el-sub-menu__title {
					color: var(--el-color-primary);

					.el-icon {
						color: var(--el-color-primary);
					}
				}
			}
		}

		:deep(.el-menu--collapse) {
			width: 64px;

			.el-sub-menu__title {
				span {
					display: none;
				}
			}
		}
	}

	.sidebar-footer {
		height: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-top: 1px solid var(--el-border-color-light);
		background: #fff;
		cursor: pointer;
		transition: all 0.3s;

		&:hover {
			background: var(--el-color-primary-light-9);
		}

		.collapse-icon {
			font-size: 16px;
			color: var(--el-text-color-regular);
			transition: all 0.3s;

			&:hover {
				color: var(--el-color-primary);
			}
		}
	}
}

:deep(.el-scrollbar__wrap) {
	overflow-x: hidden !important;
}

:deep(.el-menu--collapse) {
	width: 64px;
}
</style>
